<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>el-tree-new | vue3-element-dict</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/vue3-element-dict/favicon.ico">
    <script defer="defer" async="async" src="https://cpro.baidustatic.com/cpro/ui/cm.js"></script>
    <meta name="description" content="vue3-element-dict字典包官方使用文档">
    
    <link rel="preload" href="/vue3-element-dict/assets/css/0.styles.91c1c7f1.css" as="style"><link rel="preload" href="/vue3-element-dict/assets/js/app.cc2330b0.js" as="script"><link rel="preload" href="/vue3-element-dict/assets/js/4.8b8692cb.js" as="script"><link rel="preload" href="/vue3-element-dict/assets/js/26.ad2f64f8.js" as="script"><link rel="prefetch" href="/vue3-element-dict/assets/js/1.9df3603b.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/10.55ebc9f1.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/11.ae1602ab.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/12.7a6d05ba.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/13.1d9a30ea.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/14.e190b104.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/15.37952899.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/16.3e7761b4.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/17.47706849.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/18.2ca9e3cb.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/19.6d920865.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/2.eb833b2e.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/20.9e827313.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/21.761e0c92.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/22.46503405.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/23.2445e7a2.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/24.f387e397.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/25.483511e8.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/27.5bc6f38e.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/28.c5d10c33.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/29.fa663539.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/30.7a1bf955.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/31.9ff79c48.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/32.649b936d.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/33.876fa051.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/34.5b3fd678.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/35.e61ee13e.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/36.5ee9c11f.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/37.47b949b4.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/38.70886628.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/5.a10e50db.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/6.10b21df8.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/7.d3139522.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/8.f1b6d00e.js"><link rel="prefetch" href="/vue3-element-dict/assets/js/9.4f54a1f3.js">
    <link rel="stylesheet" href="/vue3-element-dict/assets/css/0.styles.91c1c7f1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue3-element-dict/" class="home-link router-link-active"><!----> <span class="site-name">vue3-element-dict</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue3-element-dict/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/vue3-element-dict/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="https://www.npmjs.com/package/vue3-element-dict" target="_blank" rel="noopener noreferrer" class="nav-link external">
  npm地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue3-element-dict/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/vue3-element-dict/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="https://www.npmjs.com/package/vue3-element-dict" target="_blank" rel="noopener noreferrer" class="nav-link external">
  npm地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3-element-dict/guide/" class="sidebar-link">介绍</a></li><li><a href="/vue3-element-dict/guide/fast/" class="sidebar-link">快速开始</a></li><li><a href="/vue3-element-dict/guide/directory-structure/" class="sidebar-link">目录结构</a></li><li><a href="/vue3-element-dict/guide/config/" class="sidebar-link">字典包配置</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>普通字典组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3-element-dict/components/el-select-dict/" class="sidebar-link">select-dict选择器</a></li><li><a href="/vue3-element-dict/components/el-radio-dict/" class="sidebar-link">radio-dict单选框</a></li><li><a href="/vue3-element-dict/components/el-checkbox-dict/" class="sidebar-link">checkbox-dict多选框</a></li><li><a href="/vue3-element-dict/components/el-radio-button-dict/" class="sidebar-link">radio-button-dict单选框</a></li><li><a href="/vue3-element-dict/components/el-checkbox-button-dict/" class="sidebar-link">checkbox-button-dict多选框</a></li><li><a href="/vue3-element-dict/components/el-tabs-dict/" class="sidebar-link">tabs-dict标签页</a></li><li><a href="/vue3-element-dict/components/el-tag-dict/" class="sidebar-link">tag-dict标签</a></li><li><a href="/vue3-element-dict/components/el-link-dict/" class="sidebar-link">link-dict链接</a></li><li><a href="/vue3-element-dict/components/el-button-dict/" class="sidebar-link">button-dict链接</a></li><li><a href="/vue3-element-dict/components/el-table-colmun-dict/" class="sidebar-link">el-table-colmun-dict表格</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>树形字典组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3-element-dict/components/el-cascader-dict/" class="sidebar-link">cascader-dict联级选项</a></li><li><a href="/vue3-element-dict/components/el-tree-dict/" class="sidebar-link">tree-dict树菜单</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>其他组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3-element-dict/components/el-cascader-new/" class="sidebar-link">cascader-new联级选项</a></li><li><a href="/vue3-element-dict/components/el-tree-new/" aria-current="page" class="active sidebar-link">tree-new树菜单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue3-element-dict/components/el-tree-new/#使用" class="sidebar-link">使用</a></li><li class="sidebar-sub-header"><a href="/vue3-element-dict/components/el-tree-new/#调用el-tree的方法" class="sidebar-link">调用el-tree的方法</a></li><li class="sidebar-sub-header"><a href="/vue3-element-dict/components/el-tree-new/#新增方法" class="sidebar-link">新增方法</a></li><li class="sidebar-sub-header"><a href="/vue3-element-dict/components/el-tree-new/#新增属性" class="sidebar-link">新增属性</a></li><li class="sidebar-sub-header"><a href="/vue3-element-dict/components/el-tree-new/#新增事件" class="sidebar-link">新增事件</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>过滤器</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3-element-dict/filters/dict/" class="sidebar-link">字典过滤器</a></li><li><a href="/vue3-element-dict/filters/tree-dict/" class="sidebar-link">树形字典过滤器</a></li><li><a href="/vue3-element-dict/filters/other/" class="sidebar-link">其他过滤器</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>方法</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue3-element-dict/functions/dict/" class="sidebar-link">字典方法</a></li><li><a href="/vue3-element-dict/functions/tree-dict/" class="sidebar-link">树形字典方法</a></li><li><a href="/vue3-element-dict/functions/other/" class="sidebar-link">其他方法</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="el-tree-new"><a href="#el-tree-new" class="header-anchor">#</a> el-tree-new</h1> <h2 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h2> <p>组件引入部分 略</p> <p>页面上使用（<strong>需要设置node-key属性</strong>）</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-tree-new</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tree<span class="token punctuation">&quot;</span></span> <span class="token attr-name">show-checkbox</span> <span class="token attr-name">node-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menuId<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:settings</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>defaultProps<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">default-expand-all</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tree-warp<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menuList<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-tree-new</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">menuList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token literal-property property">defaultProps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token string">&quot;children&quot;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&quot;title&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><strong>接受el-tree所有参数及事件</strong></p> <h2 id="调用el-tree的方法"><a href="#调用el-tree的方法" class="header-anchor">#</a> 调用el-tree的方法</h2> <p>调用el-tree的方法使用规则如下</p> <div class="language- extra-class"><pre class="language-text"><code>this.$refs.tree.getTree().setCheckedKeys([])
</code></pre></div><p>先使用 getTree() 方法 获取 el-tree的实例，然后再调用el-tree拥有的方法</p> <!----> <h2 id="新增方法"><a href="#新增方法" class="header-anchor">#</a> 新增方法</h2> <table><thead><tr><th>方法名</th> <th>使用方式</th> <th>作用说明</th></tr></thead> <tbody><tr><td>expandAll</td> <td>this.$refs.tree.expandAll()</td> <td>展开所有选项</td></tr> <tr><td>foldAll</td> <td>this.$refs.tree.foldAll()</td> <td>折叠所有选项</td></tr> <tr><td>expandAllFirstLevel</td> <td>this.$refs.tree.expandAllFirstLevel()</td> <td>展开所有一级树</td></tr> <tr><td>foldAllFirstLevel</td> <td>this.$refs.tree.foldAllFirstLevel()</td> <td>折叠所有一级树</td></tr> <tr><td>judgeExpandAll</td> <td>this.$refs.tree.judgeExpandAll()</td> <td>判断是否展开全部 是的话 返回 true，否则返回false</td></tr> <tr><td>judgeFoldAll</td> <td>this.$refs.tree.judgeFoldAll()</td> <td>判断是否折叠全部 是的话 返回 true，否则返回false</td></tr> <tr><td>judgeExpandAllFirstLevel</td> <td>this.$refs.tree.judgeExpandAllFirstLevel()</td> <td>判断是否展开全部一级树 是的话 返回 true，否则返回false</td></tr> <tr><td>judgeFoldAllFirstLevel</td> <td>this.$refs.tree.judgeFoldAllFirstLevel()</td> <td>判断是否折叠全部一级树 是的话 返回 true，否则返回false</td></tr> <tr><td>selectAll</td> <td>this.$refs.tree.selectAll()</td> <td>复选框模式下全选</td></tr> <tr><td>unSelectAll</td> <td>this.$refs.tree.unSelectAll()</td> <td>复选框模式下全不选</td></tr> <tr><td>toggleSelectAll</td> <td>this.$refs.tree.toggleSelectAll()</td> <td>复选框模式下反选</td></tr> <tr><td>judgeSelectAll</td> <td>this.$refs.tree.judgeSelectAll()</td> <td>判断是否全选 是的话 返回 true，否则返回false</td></tr> <tr><td>judgeUnSelectAll</td> <td>this.$refs.tree.judgeUnSelectAll()</td> <td>判断是否全不选 是的话 返回 true，否则返回false</td></tr></tbody></table> <p><strong>注意：</strong> judgeExpandAll，judgeFoldAll，judgeExpandAllFirstLevel，judgeFoldAllFirstLevel，judgeSelectAll，judgeUnSelectAll</p> <p>这四个方法 一般配合 expandChange 事件使用，需再添加定时器 ，否则有bug，如</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-tree-new</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tree<span class="token punctuation">&quot;</span></span> <span class="token attr-name">show-checkbox</span> <span class="token attr-name">node-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@expandChange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>expandChange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@check-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkChange<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
	expandChange(){
      setTimeout(() =&gt; {
        if (this.isExpand) {
          const isFoldAllFirstLevel = this.$refs.tree.judgeFoldAllFirstLevel() //是否折叠所有一级树
          if (isFoldAllFirstLevel) {
            this.isExpand = false
          }
        } else {
          const isExpandAllFirstLevel = this.$refs.tree.judgeExpandAllFirstLevel() //是否展开所有一级树
          if (isExpandAllFirstLevel) {
            this.isExpand = true
          }
        }
      }, 100)
    },
</code></pre></div><h2 id="新增属性"><a href="#新增属性" class="header-anchor">#</a> 新增属性</h2> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>默认值</th></tr></thead> <tbody><tr><td>data</td> <td>树的数据</td> <td>Array</td> <td>树数据的示例，太长在这不写</td></tr> <tr><td>settings</td> <td>设置</td> <td>Object</td> <td>{level: &quot;level&quot;,children: &quot;children&quot;,label: &quot;label&quot;}</td></tr> <tr><td>maxLevel</td> <td>限制最大层级 “1” 表示 最大层级为2层 “2” 表示 最大层级为 3层 ... 默认值为&quot;&quot;，不限制层级</td> <td>String</td> <td>&quot;&quot;</td></tr></tbody></table> <h2 id="新增事件"><a href="#新增事件" class="header-anchor">#</a> 新增事件</h2> <table><thead><tr><th>事件名称</th> <th>事件说明</th> <th>备注</th></tr></thead> <tbody><tr><td>expandChange</td> <td>折叠或展开时触发，无返回值</td> <td><strong>折叠状态改变 可能比 上面的 判断方法执行的慢，导致判断不准确，因此需要再上述判断方法添加 延时</strong></td></tr></tbody></table></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">4/26/2023, 9:20:46 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/vue3-element-dict/components/el-cascader-new/" class="prev">
        cascader-new联级选项
      </a></span> <span class="next"><a href="/vue3-element-dict/filters/dict/">
        字典过滤器
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><div id="loading-mask"><div class="loading-wrapper"><span class="loading-dot loading-dot-spin"><i></i> <i></i> <i></i> <i></i></span></div></div><!----></div></div>
    <script src="/vue3-element-dict/assets/js/app.cc2330b0.js" defer></script><script src="/vue3-element-dict/assets/js/4.8b8692cb.js" defer></script><script src="/vue3-element-dict/assets/js/26.ad2f64f8.js" defer></script>
  </body>
</html>
